<template>
  <div id="app" style="display: flex;flex-direction:column">
    <div style="height:100%">
      <router-view/>
    </div>
    
  </div>
</template>
<script>
  export default {
    name: 'App',
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100vh;
}


nav a {
  font-weight: normal;
  color: #222222;
}

nav a.router-link-exact-active {
  color: #950000;
}
.item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 10vh;
}
.itemInfo{
  margin-top: 5px;
}
.homePage{
  width: 30px;
  height: 30px;
  background-image: url('./assets/images/home.png');
  background-size: cover;
}
.homePage_active{
  width: 30px;
  height: 30px;
  background-image: url('./assets/images/a-home.png');
  background-size: cover;
}
.categryPage{
  width: 30px;
  height: 30px;
  background-image: url('./assets/images/classify.png');
  background-size: cover;
}
.categryPage_active{
  width: 30px;
  height: 30px;
  background-image: url('./assets/images/a-classify.png');
  background-size: cover;
}
.cartPage{
  width: 30px;
  height: 30px;
  background-image: url('./assets/images/shoppingcart.png');
  background-size: cover;
}
.cartPage_active{
  width: 30px;
  height: 30px;
  background-image: url('./assets/images/a-shoppingcart.png');
  background-size: cover;
}
.myPage{
  width: 30px;
  height: 30px;
  background-image: url('./assets/images/mine.png');
  background-size: cover;
}
.myPage_active{
  width: 30px;
  height: 30px;
  background-image: url('./assets/images/a-mine.png');
  background-size: cover;
}

</style>
